<template>
  <div class="ratings-container">
    <div class="row">
      <div class="box_1" v-if="seller">
        <div class="score">
          <div class="score_1">{{ seller.score }}</div>
          <div class="score_2">综合评分</div>
          <div class="score_3">高于周边商家{{ seller.rankRate }}%</div>
        </div>
        <div class="server">
          <div class="server_1"><span>服务评价</span><span class="star">★★★★★</span><span>{{ seller.serviceScore }}</span></div>
          <div class="server_2"><span>食品评价</span><span class="star">★★★★★</span><span>{{ seller.foodScore }}</span></div>
        </div>
      </div>
      <div class="box_2">

        <div class="btn">
          <div class="btn_1" @click="showList" :class="[listShadow ? 'clearshadow' : '']">全部{{ seller.ratingCount }}</div>
          <div class="btn_2" @click="showGood" :class="[goodShadow ? 'clearshadow' : '']">推荐{{ goodnum }}</div>
          <div class="btn_3" @click="showBad" :class="[badShadow ? 'clearshadow' : '']">吐槽{{ badnum }}</div>
        </div>

        <transition name="ratings_fade">
          <div class="ratingsbox" v-if="listFlag">
            <div class="ratings" v-if="list" v-for="item in list" :key="item.username">
              <div class="ratings_1">
                <div class="pic">
                  <img :src="item.avatar" alt="头像">
                </div>
              </div>
              <div class="ratings_2">
                <div class="user">
                  <div><span class="username">{{ item.username }}</span><span class="rateTime">{{ item.rateTime |
                      timeFormat }}</span></div>
                  <div><span class="star">★★★★★</span><span class="deliveryTime">{{ item.deliveryTime }}分钟</span></div>
                </div>
                <div class="text" v-if="item.text">{{ item.text }}</div>
                <div class="text" v-else>该用户没有评论</div>
                <div class="recommend" v-if="item.recommend">
                  <span :class="[!item.rateType ? 'icon-thumb_up' : 'icon-thumb_down']"></span>
                  <div v-for="item2 in item.recommend" :key="item2"><span class="rec">{{ item2 }}</span></div>
                </div>
              </div>
            </div>

            <div class="ratings">
              <div class="ratings_1">
                <div class="pic">
                  <img src="http://static.galileo.xiaojukeji.com/static/tms/default_header.png" alt="头像">
                </div>
              </div>
              <div class="ratings_2">
                <div class="user">
                  <div><span class="username">用户名</span><span class="rateTime">2018.10.10</span></div>
                  <div><span class="star">★★★★★</span><span class="deliveryTime">60分钟</span></div>
                </div>
                <div class="text">不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.</div>
                <div class="recommend">
                  <span class="icon-thumb_up"></span>
                  <div><span class="rec">推荐推荐推荐推荐123123</span><span class="rec">推荐123123123</span></div>
                </div>
              </div>
            </div>
          </div>
        </transition>

        <transition name="ratings_fade">
          <div class="ratingsbox" v-if="goodFlag">
            <div class="ratings" v-if="good" v-for="item in good" :key="item.username">
              <div class="ratings_1">
                <div class="pic">
                  <img :src="item.avatar" alt="头像">
                </div>
              </div>
              <div class="ratings_2">
                <div class="user">
                  <div><span class="username">{{ item.username }}</span><span class="rateTime">{{ item.rateTime |
                      timeFormat }}</span></div>
                  <div><span class="star">★★★★★</span><span class="deliveryTime">{{ item.deliveryTime }}分钟</span></div>
                </div>
                <div class="text" v-if="item.text">{{ item.text }}</div>
                <div class="text" v-else>该用户没有评论</div>
                <div class="recommend" v-if="item.recommend">
                  <span :class="[!item.rateType ? 'icon-thumb_up' : 'icon-thumb_down']"></span>
                  <div v-for="item2 in item.recommend" :key="item2"><span class="rec">{{ item2 }}</span></div>
                </div>
              </div>
            </div>
          </div>
        </transition>

        <transition name="ratings_fade">
          <div class="ratingsbox" v-if="badFlag">
            <div class="ratings" v-if="bad" v-for="item in bad" :key="item.username">
              <div class="ratings_1">
                <div class="pic">
                  <img :src="item.avatar" alt="头像">
                </div>
              </div>
              <div class="ratings_2">
                <div class="user">
                  <div><span class="username">{{ item.username }}</span><span class="rateTime">{{ item.rateTime |
                      timeFormat }}</span></div>
                  <div><span class="star">★★★★★</span><span class="deliveryTime">{{ item.deliveryTime }}分钟</span></div>
                </div>
                <div class="text" v-if="item.text">{{ item.text }}</div>
                <div class="text" v-else>该用户没有评论</div>
                <div class="recommend" v-if="item.recommend">
                  <span :class="[!item.rateType ? 'icon-thumb_up' : 'icon-thumb_down']"></span>
                  <div v-for="item2 in item.recommend" :key="item2"><span class="rec">{{ item2 }}</span></div>
                </div>
              </div>
            </div>
          </div>
        </transition>

      </div>
    </div>
  </div>
</template>

<script>
const ERR_OK = 0
export default {
  name: 'RatingsView',
  data () {
    return {
      seller: {},
      list: [],
      bad: [],
      good: [],
      badnum: 0,
      goodnum: 0,
      listFlag: true,
      goodFlag: false,
      badFlag: false,
      listShadow: false,
      goodShadow: false,
      badShadow: false
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    badRatings (paramas) {
      return paramas.rateType === 1
    },
    goodRatings (paramas) {
      return paramas.rateType === 0
    },
    getInfo () {
      this.$http.get('http://localhost:8081/api/ratings').then(res => {
        if (!res.body.errno === ERR_OK) return
        this.list = res.body.data
        // console.log(this.list.find(this.badRatings))
        // 这里用push（会改变原数组）  concat是拼接数组，而这里find（）过来的是一个对象
        this.list.forEach(element => {
          if (element.rateType === 1) {
            this.bad.push(element)
          } else {
            this.good.push(element)
          }
        })
        // console.log(this.bad)
        // console.log(this.good)
        this.badnum = this.bad.length
        this.goodnum = this.good.length
      })
      this.$http.get('http://localhost:8081/api/seller').then(res => {
        if (!res.body.errno === ERR_OK) return
        this.seller = res.body.data
      })
    },
    showList () {
      this.listFlag = true
      this.badFlag = false
      this.goodFlag = false

      this.listShadow = true
      this.goodShadow = false
      this.badShadow = false
    },
    showGood () {
      this.listFlag = false
      this.badFlag = false
      this.goodFlag = true

      this.listShadow = false
      this.goodShadow = true
      this.badShadow = false
    },
    showBad () {
      this.listFlag = false
      this.badFlag = true
      this.goodFlag = false

      this.listShadow = false
      this.goodShadow = false
      this.badShadow = true
    }
  },
  filters: {
    timeFormat (time) {
      // return moment().format()
      var date = new Date()
      // console.log(date.toLocaleDateString())
      // console.log(date.toLocaleTimeString())
      // 转义/  g 遍历整个
      return date.toLocaleDateString().replace(/\//g, '.') + date.toLocaleTimeString()
    }
  }
}

</script>

<style lang="scss" scoped>
  .ratings-container {
    width: 100%;
    height: 100%;
    overflow: scroll;
    .clearshadow {
      // transform: translate(5px,5px);
      // transform: translateZ(5px);
      transform: scale(1.1, 1.1);
      transition: all .3s ease;
    }

    .row {
      background-color: rgba(147, 153, 159, .1);

      .box_1 {
        margin-bottom: 0.36rem;
        width: 100%;
        height: 2.2rem;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-bottom: 1px solid rgba(7, 17, 27, .2);

        .score {
          flex: 0 0 35%;
          height: 1.6rem;
          line-height: 0.5rem;
          font-size: 0.28rem;
          text-align: center;
          border-right: 1px solid rgba(147, 153, 159, .3);

          .score_1 {
            font-size: 0.48rem;
            color: rgb(255, 153, 0);
          }

          .score_2 {
            color: rgb(7, 17, 27);
          }

          .score_3 {
            color: rgb(147, 153, 159);
          }
        }

        .server {
          flex: 0 0 65%;
          height: 1.6rem;
          line-height: 0.8rem;
          font-size: 0.3rem;
          text-align: center;
          color: rgb(7, 17, 27);

          .server_1,
          .server_2 {
            .star {
              margin-left: 0.24rem;
              color: rgb(255, 153, 0);
            }

            span:last-of-type {
              margin-left: 0.24rem;
              color: rgb(255, 153, 0);
            }
          }

        }
      }

      .box_2 {
        padding: 0 0.36rem;
        background-color: #fff;
        border-top: 1px solid rgba(7, 17, 27, .2);
        // border-bottom: 1px solid rgba(7, 17, 27, .2);

        .btn {
          display: flex;
          align-items: center;
          padding: 0.36rem 0;
          width: 100%;
          height: 1.38rem;
          text-align: center;
          font-size: 0.3rem;
          border-bottom: 1px solid rgba(147, 153, 159, 0.3);

          div {
            padding: 0 0.24rem;
            margin: 0 0.1rem;
            width: 1.5rem;
            height: 0.64rem;
            line-height: 0.64rem;
            border-radius: 3px;
            box-shadow: rgba(0, 0, 0, 0.5) 1px 2px 5px;
          }

          .btn_1 {
            color: #fff;
            background-color: rgb(0, 160, 220);
          }

          .btn_2 {
            color: rgb(77, 85, 93);
            background-color: rgba(0, 160, 220, .2);
          }

          .btn_3 {
            color: rgb(77, 85, 93);
            background-color: rgba(77, 85, 93, .2);
          }
        }

        .ratingsbox {
          .ratings {
            padding: 0.36rem 0;
            height: 3.99rem;
            display: flex;
            border-bottom: 1px solid rgba(147, 153, 159, 0.3);
            // align-items: center;

            .ratings_1 {
              flex: 0 0 20%;
              height: 100%;

              img {
                display: block;
                height: 1rem;
                width: 1rem;
                border-radius: 50%;
              }
            }

            .ratings_2 {
              flex: 0 0 80%;

              .user {
                margin-bottom: 0.25rem;

                div {
                  height: 0.5rem;
                  line-height: 0.5rem;
                  font-size: 0.28rem;
                  position: relative;
                }

                .username {
                  color: rgb(7, 17, 27);
                }

                .rateTime {
                  position: absolute;
                  top: 0;
                  right: 0;
                  color: rgb(147, 153, 159);
                }

                .star {
                  color: rgb(255, 153, 0);
                }

                .deliveryTime {
                  margin-left: 0.2rem;
                  color: rgb(147, 153, 159);
                }
              }

              .text {
                margin-bottom: 0.25rem;
                height: 1rem;
                line-height: 0.5rem;
                font-size: 0.32rem;
                color: rgb(7, 17, 27);
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
              }

              .recommend {
                height: 0.75rem;
                line-height: 0.75rem;
                font-size: 0.36rem;
                overflow: hidden;

                .icon-thumb_up {
                  vertical-align: middle;
                  display: inline-block;
                  color: rgb(0, 160, 220);
                }

                .icon-thumb_down {
                  color: rgb(147, 153, 159);
                }

                div {
                  height: 100%;
                  display: inline-block;
                  vertical-align: middle;
                }

                .rec {
                  display: inline-block;
                  margin-right: 0.2rem;
                  padding: 0 0.1rem;
                  height: 100%;
                  width: 1.4rem;
                  font-size: 0.3rem;
                  color: rgb(147, 153, 159);
                  border: 1px solid rgba(147, 153, 159, .3);
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
    }

    .ratings_fade-enter-active {
      transition: all .3s ease;
    }

    .ratings_fade-leave-active {
      opacity: 0;
    }

    .ratings_fade-enter,
    .ratings_fade-leave-to {
      opacity: 0;
      transform: translateY(50px)
    }
  }

</style>
